<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON 智能修复演示</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .demo-container {
            background: white;
            border-radius: 8px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .demo-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
            color: #333;
            text-align: center;
        }
        
        .demo-description {
            color: #666;
            margin-bottom: 30px;
            font-size: 16px;
            line-height: 1.6;
            text-align: center;
        }
        
        .demo-section {
            margin-bottom: 40px;
        }
        
        .section-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }
        
        .code-block {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 20px;
            margin: 15px 0;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 13px;
            line-height: 1.4;
            white-space: pre-wrap;
            word-break: break-all;
        }
        
        .code-block.error {
            background: #f8d7da;
            border-color: #f5c6cb;
            color: #721c24;
        }
        
        .code-block.success {
            background: #d4edda;
            border-color: #c3e6cb;
            color: #155724;
        }
        
        .demo-button {
            background: #667eea;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            margin: 10px 5px;
            transition: all 0.2s ease;
        }
        
        .demo-button:hover {
            background: #5a67d8;
            transform: translateY(-1px);
        }
        
        .demo-button.secondary {
            background: #95a5a6;
        }
        
        .demo-button.secondary:hover {
            background: #7f8c8d;
        }
        
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        
        .feature-card {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
        }
        
        .feature-icon {
            font-size: 32px;
            margin-bottom: 15px;
        }
        
        .feature-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
            color: #333;
        }
        
        .feature-description {
            color: #666;
            font-size: 14px;
            line-height: 1.5;
        }
        
        .cta-section {
            text-align: center;
            margin: 40px 0;
        }
        
        .cta-button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 18px;
            font-weight: 600;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
        }
        
        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        
        .highlight {
            background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div class="demo-container">
        <div class="demo-title">🚀 JSON 智能修复功能演示</div>
        <div class="demo-description">
            基于先进的 <span class="highlight">jsonrepair.js</span> 库，我们的 JSON 格式化工具现在具备了强大的智能修复能力。
            无论您的 JSON 数据存在什么格式问题，智能修复功能都能帮您快速解决！
        </div>
        
        <div class="feature-grid">
            <div class="feature-card">
                <div class="feature-icon">🔧</div>
                <div class="feature-title">智能修复</div>
                <div class="feature-description">
                    自动检测并修复各种 JSON 格式错误，包括单引号、未引用属性名、尾随逗号等
                </div>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">👁️</div>
                <div class="feature-title">修复预览</div>
                <div class="feature-description">
                    在应用修复前预览修复结果，确保修复效果符合预期
                </div>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">⚡</div>
                <div class="feature-title">快速处理</div>
                <div class="feature-description">
                    基于流式解析的高性能算法，能够快速处理大型 JSON 文件
                </div>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">🛡️</div>
                <div class="feature-title">安全可靠</div>
                <div class="feature-description">
                    渐进式修复策略，先尝试高级修复，失败时自动降级到基础修复
                </div>
            </div>
        </div>
    </div>

    <div class="demo-container">
        <div class="section-title">📝 常见错误修复示例</div>
        
        <div class="demo-section">
            <h3>1. 单引号转双引号</h3>
            <div class="code-block error">// 错误的 JavaScript 风格 JSON
{
  name: 'John Doe',
  age: 30,
  city: 'New York',
  hobbies: ['reading', 'swimming'],
  active: true
}</div>
            <button class="demo-button" onclick="showRepair('single-quotes')">查看修复结果</button>
        </div>
        
        <div class="demo-section">
            <h3>2. 未引用属性名</h3>
            <div class="code-block error">// 属性名缺少引号
{
  name: "John",
  age: 30,
  city: "New York",
  isActive: true,
  hobbies: ["reading", "swimming"]
}</div>
            <button class="demo-button" onclick="showRepair('unquoted-keys')">查看修复结果</button>
        </div>
        
        <div class="demo-section">
            <h3>3. 尾随逗号</h3>
            <div class="code-block error">// 对象和数组末尾的尾随逗号
{
  "name": "John",
  "age": 30,
  "hobbies": [
    "reading",
    "swimming",
  ],
  "address": {
    "street": "123 Main St",
    "city": "New York",
  },
}</div>
            <button class="demo-button" onclick="showRepair('trailing-commas')">查看修复结果</button>
        </div>
        
        <div class="demo-section">
            <h3>4. 注释处理</h3>
            <div class="code-block error">// 包含 JavaScript 注释
{
  // 用户信息
  "name": "John Doe",
  "age": 30,
  /* 地址信息 */
  "address": {
    "street": "123 Main St",
    "city": "New York"
  },
  // 爱好列表
  "hobbies": ["reading", "swimming"]
}</div>
            <button class="demo-button" onclick="showRepair('comments')">查看修复结果</button>
        </div>
        
        <div class="demo-section">
            <h3>5. 复杂错误组合</h3>
            <div class="code-block error">// 多种错误的组合
{
  // 用户数据
  name: 'John Doe',
  age: 30,
  email: john.doe@example.com,
  isActive: true,
  hobbies: [
    'reading',
    'swimming',
  ],
  address: {
    street: '123 Main St',
    city: 'New York',
    zipCode: 10001,
  },
  // 额外信息
  metadata: {
    createdAt: '2023-01-01',
    updatedAt: '2023-12-01',
  },
}</div>
            <button class="demo-button" onclick="showRepair('complex')">查看修复结果</button>
        </div>
    </div>

    <div class="demo-container">
        <div class="section-title">🎯 修复结果展示</div>
        <div id="repair-result" style="display: none;">
            <div class="code-block success" id="repaired-content"></div>
            <button class="demo-button secondary" onclick="hideRepair()">隐藏结果</button>
        </div>
    </div>

    <div class="demo-container">
        <div class="cta-section">
            <h2>准备好体验智能修复功能了吗？</h2>
            <p style="margin-bottom: 30px; color: #666;">
                立即打开 JSON 格式化工具，体验强大的智能修复功能！
            </p>
            <a href="json-formatter.html" class="cta-button">🚀 开始使用</a>
            <a href="test-repair.html" class="demo-button secondary" style="margin-left: 15px;">🧪 运行测试</a>
        </div>
    </div>

    <script src="jsonrepair.js"></script>
    <script>
        const repairExamples = {
            'single-quotes': {
                input: `{
  name: 'John Doe',
  age: 30,
  city: 'New York',
  hobbies: ['reading', 'swimming'],
  active: true
}`,
                description: '修复 JavaScript 风格的单引号为 JSON 标准的双引号'
            },
            'unquoted-keys': {
                input: `{
  name: "John",
  age: 30,
  city: "New York",
  isActive: true,
  hobbies: ["reading", "swimming"]
}`,
                description: '为未加引号的属性名添加双引号'
            },
            'trailing-commas': {
                input: `{
  "name": "John",
  "age": 30,
  "hobbies": [
    "reading",
    "swimming",
  ],
  "address": {
    "street": "123 Main St",
    "city": "New York",
  },
}`,
                description: '移除对象和数组末尾的尾随逗号'
            },
            'comments': {
                input: `{
  // 用户信息
  "name": "John Doe",
  "age": 30,
  /* 地址信息 */
  "address": {
    "street": "123 Main St",
    "city": "New York"
  },
  // 爱好列表
  "hobbies": ["reading", "swimming"]
}`,
                description: '移除 JavaScript 风格的注释'
            },
            'complex': {
                input: `{
  // 用户数据
  name: 'John Doe',
  age: 30,
  email: john.doe@example.com,
  isActive: true,
  hobbies: [
    'reading',
    'swimming',
  ],
  address: {
    street: '123 Main St',
    city: 'New York',
    zipCode: 10001,
  },
  // 额外信息
  metadata: {
    createdAt: '2023-01-01',
    updatedAt: '2023-12-01',
  },
}`,
                description: '处理多种错误的复杂组合'
            }
        };

        function showRepair(type) {
            const example = repairExamples[type];
            if (!example) return;

            try {
                // 检查 jsonrepair 库是否可用
                if (typeof JSONRepair === 'undefined' || typeof JSONRepair.jsonrepair !== 'function') {
                    alert('智能修复库未加载，请刷新页面重试');
                    return;
                }

                // 执行修复
                const repaired = JSONRepair.jsonrepair(example.input);
                
                // 验证修复结果
                JSON.parse(repaired);
                
                // 显示修复结果
                const resultDiv = document.getElementById('repair-result');
                const contentDiv = document.getElementById('repaired-content');
                
                contentDiv.textContent = `// ${example.description}\n${repaired}`;
                resultDiv.style.display = 'block';
                
                // 滚动到结果区域
                resultDiv.scrollIntoView({ behavior: 'smooth' });
                
            } catch (error) {
                alert(`修复失败: ${error.message}`);
            }
        }

        function hideRepair() {
            document.getElementById('repair-result').style.display = 'none';
        }

        // 页面加载完成后检查库是否可用
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof JSONRepair === 'undefined' || typeof JSONRepair.jsonrepair !== 'function') {
                console.warn('JSON 智能修复库未正确加载');
            } else {
                console.log('JSON 智能修复库加载成功');
            }
        });
    </script>
</body>
</html> 